<template>
  <view v-if="layout=='flex'">
    <view class="p-20 flex-top" style="height: 200rpx" @click="toPath('/shop/index/detail')">
      <image src="https://picsum.photos/id/200/200/300"
             style="width: 220rpx;height: 200rpx;border-radius: 10rpx;margin-right: 20rpx"></image>
      <view class="flex-column-between" style="flex: 1;height: 100%">
        <view class="text-2">Drew字母印花连Drew字母印花连Drew字母印花连Drew字母印花连Drew字母印花连asas</view>

        <view class="u-f-sm">
          ￥<span class="u-f-sxl">888.00</span>
          <span class="u-f-sm  f-c-9" style="margin-left: 15rpx">历史购买人数：80</span>
        </view>
      </view>
    </view>
  </view>
  <view v-else style="display: grid;gap:20rpx" class="p-20" :style="{gridTemplateColumns: `repeat(${grid}, 1fr)`}">
    <view v-for="i in 4" @click="toPath('/shop/index/detail')" class="p-c-15">
      <image src="https://picsum.photos/id/200/200/300"
             :style="{height:grid===2?'300rpx':'240rpx'}"
             style="width: 100%;border-radius: 10rpx;margin-right: 20rpx"></image>
      <view class="text-2" style="margin: 10rpx 0">Drew字母印花连Drew字母印花连Drew字母印花连Drew字母印花连Drew字母印花连asas</view>
      <view class="u-f-sm">
        ￥<span class="u-f-sxl">888.00</span>
        <span class="u-f-sm  f-c-9" style="margin-left: 15rpx">历史购买人数：80</span>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>

import {toPath} from "@/util/router/router";

const props = defineProps({
  layout: {
    type: String,
    default: 'grid'
  },
  grid: {
    type: Number,
    default: 2
  }
})

</script>

<style scoped lang="scss">
@import "~@/static/css/index.css";

</style>